<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
    	<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>导航</title>
		<link rel="stylesheet" href="../../css/bootstrap.min.css" />
	</head>
	<body>
		<!--
        	nav                 导航基础样式
        	
        -->
		<div class="container">
			<div class="row">
				<ul class="nav nav-tabs">
					<li><a href="#">北京</a></li>
					<li class="active"><a href="#">上海</a></li>
					<li><a href="#">天津</a></li>
					<li><a href="#">西安</a></li>
				</ul>
			</div>
			<!-- 胶囊式 nav-pills -->
			<div class="row" style="margin-top: 20px;">
				<ul class="nav nav-pills">
					<li><a href="#">北京</a></li>
					<li class="active"><a href="#">上海</a></li>
					<li><a href="#">天津</a></li>
					<li><a href="#">西安</a></li>
				</ul>
			</div>
			<!-- 竖着排 nav-stacked -->
			<div class="row" style="margin-top: 20px;">
				<ul class="nav nav-pills nav-stacked">
					<li><a href="#">北京</a></li>
					<li class="active"><a href="#">上海</a></li>
					<li><a href="#">天津</a></li>
					<li><a href="#">西安</a></li>
				</ul>
			</div>
			<!-- 两端对齐 nav-justified -->
			<div class="row" style="margin-top: 20px;">
				<ul class="nav nav-pills nav-justified">
					<li><a href="#">北京</a></li>
					<li class="active"><a href="#">上海</a></li>
					<li><a href="#">天津</a></li>
					<li><a href="#">西安</a></li>
				</ul>
			</div>
			<!-- 导航下拉菜单  -->
			<div class="row" style="margin-top: 20px;">
				<ul class="nav nav-tabs">
					<li><a href="#">北京</a></li>
					<li class="active"><a href="#">上海</a></li>
					<li>
						<a href="#" data-toggle="dropdown">天津<span class="caret"></span></a>
						<ul class="dropdown-menu">
							<li><a href="#">东疆港01</a></li>
							<li class="divider"></li>
							<li><a href="#">东疆港02</a></li>
							<li class="divider"></li>
							<li><a href="#">东疆港03</a></li>
							<li class="divider"></li>
							<li><a href="#">东疆港04</a></li>
							<li class="divider"></li>
							<li><a href="#">东疆港05</a></li>
						</ul>
					</li>
					<li><a href="#">河北</a></li>
					<li><a href="#">陕西</a></li>
				</ul>
			</div>
		</div>
		<script type="text/javascript" src="../../js/jquery-2.1.0.js" ></script>
		<script type="text/javascript" src="../../js/bootstrap.min.js" ></script>
	</body>
</html>
